<!DOCTYPE HTML>
<html>
<head>
 <title>注册界面</title>
 <meta charset='utf-8'>

 <style type="text/css">
 *{
  margin: 0;
  padding: 0;
  list-style: none;
 }
 body{
  font-family: sans-serif,Verdana, Helvetica, Arial;
 }
     #main{
      padding-left: 350px;
     }
    .kv-item{
 padding-left: 100px;
 padding-bottom: 20px;
   }
    .kv-label{
 display: inline;
 height: 28px;
 line-height: 28px;
 margin-left: -100px;
 float: left;
 text-align: right;
 width: 100px;
   }
   .text-align{
 border:1px solid #474E63;
 color: #0A1844;
 height: 26px;
 line-height:26px;
 padding:0 2px;
 width: 177px; 
 text-align: left;
    }
    #submit{
 margin-left: 80px;
 border:1px solid #474E63;
 height: 26px;
 font-weight: bold;
   }
   #reset{
 border:1px solid #474E63;
 height: 26px;
 font-weight: bold;
   }
</style>
 

 <script type="text/javascript">
//判断前三个表单元素（用户名、密码、确认密码是否为空）
function check(Form){
 var check=true;
 var flag=0;
 for(i=0;i<3;i++){
  if(Form.elements[i].value=="")
  {alert(Form.elements[i].title+"不能为空！");
  Form.elements[i].focus();
  check=false;
  return false;}
  //判断两次输入的密码是否相同
  if(i==2)
  if(Form.pwd.value!=Form.repwd.value)
   {alert("两次输入密码不同，请重新输入！");
  Form.repwd.value="";
     Form.pwd.value="";
  i=i-2;
  continue;
  }
  
 }
return check;
}
</script>

</head>
<body>
 <div id="main">
  <form name="personalForm" method="post" action="" onSubmit="return check(this)">
   <div class="kv-item">
    <span class="kv-label">
     <label class="tsl" for="username">用户名：</label>
    </span>
    <input type="text" name="username"class="text-align" id="username" placeholder="*必填项" autofocus size="25" title="用户名"></div>
   <div class="kv-item">
    <span class="kv-label">
     <label class="tsl" for="pwd">密&nbsp;码：</label>
    </span>
    <input type="password" name="pwd" class="text-align" id="pwd" placeholder="*必填项" size="25" title="密码" ></div>
   <div class="kv-item">
    <span class="kv-label">
     <label class="tsl" for="repwd">确认密码：</label>
    </span>
    <input type="password" name="repwd" class="text-align" id="repwd" placeholder="*必填项" size="25" title="确认密码"></div>
   <div class="kv-item">
    <span class="kv-label">
     <label class="tsl" for="sex_boy">性&nbsp;别：</label>
    </span>
    <input type="radio" name="sex" id="sex_boy" value="男" checked >
    男
    <input type="radio" name="sex"  id="sex_girl" value="女">女</div>
   <div class="kv-item">
    <span class="kv-label">
     <label class="tsl" for="student">职&nbsp;业：</label>
    </span>
    <select name="job">
     <option id="student" value="学生" selected="selected">学生</option>
     <option value="职员">职员</option>
     <option value="经理">经理</option>
     <option value="军人">军人</option>
     <option value="自由人">自由人</option>
    </select>
   </div>
   <div class="kv-item">
    <span class="kv-label">
     <label class="tsl">个人爱好：</label>
    </span>
    <input type="checkbox" name="Computer" value="电脑网络">
    电脑网络&nbsp;
    <input type="checkbox" name="Vedio" value="影视娱乐">
    影视娱乐&nbsp;
    <input type="checkbox" name="Card" value="棋牌娱乐">
    棋牌娱乐
    <br>
    <input type="checkbox" name="Book" value="读书读报">
    读书读报&nbsp;
    <input type="checkbox" name="Food" value="美酒佳肴">
    美酒佳肴&nbsp;
    <input type="checkbox" name="Art" value="绘画书法">绘画书法</div>
   <div class="kv-item">
    <span class="kv-label">
     <label class="tsl">个人说明：</label>
    </span>
    <textarea class="text" rows="10" cols="30"></textarea>
   </div>
   <div class="kv-item">
    <input type="submit" name="submit" id="submit" value="提交" >
    <input type="reset" name="reset" id="reset" value="重置"></div>
  </form>
 </div>
</body>
</html>